<template>
  <div>
    <h2>消息管理</h2>
    <el-table
      :data="messages"
      style="width: 100%"
      @row-click="handleRowClick"
    >
      <el-table-column prop="title" label="标题" width="200" />
      <el-table-column prop="content" label="内容" />
      <el-table-column prop="date" label="时间" width="180" />
      <el-table-column
        label="状态"
        width="100"
      >
        <template #default="scope">
          <el-tag :type="scope.row.read ? 'info' : 'success'">
            {{ scope.row.read ? '已读' : '未读' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button
            size="mini"
            type="danger"
            @click.stop="deleteMessage(scope.$index)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="markAllRead" style="margin-top: 10px;">全部标为已读</el-button>

    <!-- 消息详情对话框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      title="消息详情"
      width="400px"
    >
      <div v-if="currentMessage">
        <p><strong>标题：</strong>{{ currentMessage.title }}</p>
        <p><strong>内容：</strong>{{ currentMessage.content }}</p>
        <p><strong>时间：</strong>{{ currentMessage.date }}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const messages = ref([
  {
    title: '系统通知',
    content: '欢迎使用学生管理系统！',
    date: '2024-06-17 10:00',
    read: false,
  },
  {
    title: '老师留言',
    content: '请及时提交作业。',
    date: '2024-06-16 15:30',
    read: true,
  },
  // 可以继续添加更多消息
])

const dialogVisible = ref(false)
const currentMessage = ref(null)

function handleRowClick(row) {
  currentMessage.value = row
  row.read = true // 标记为已读
  dialogVisible.value = true
}

function deleteMessage(index) {
  messages.value.splice(index, 1)
  ElMessage.success('消息已删除')
}

function markAllRead() {
  messages.value.forEach(msg => { msg.read = true })
  ElMessage.success('全部消息已标为已读')
}
</script>

<style scoped>
h2 {
  margin-bottom: 20px;
}
</style>